<template>
  <n-card title="视频流分析任务详情" :bordered="false" class="h-full">
    <n-steps :current="currentStep" class="mb-4">
      <n-step title="选择摄像头和算法" />
      <n-step title="设置算法名称" />
      <n-step title="查看报警详情" />
    </n-steps>

    <!-- 第一步：选择摄像头和算法 -->
    <div v-if="currentStep === 1">
      <n-space vertical>
        <n-select
          v-model:value="selectedCamera"
          :options="cameraOptions"
          placeholder="请选择摄像头"
        />
        <n-select
          v-model:value="selectedAlgorithm"
          :options="algorithmOptions"
          placeholder="请选择算法"
        />
      </n-space>
      <n-button type="primary" class="mt-4" @click="currentStep++">下一步</n-button>
    </div>

    <!-- 第二步：设置算法名称 -->
    <div v-if="currentStep === 2">
      <n-input
        v-model:value="algorithmName"
        placeholder="请输入算法名称"
        class="mb-4"
      />
      <n-button type="default" class="mr-2" @click="currentStep--">上一步</n-button>
      <n-button type="primary" @click="currentStep++">下一步</n-button>
    </div>

    <!-- 第三步：查看报警详情 -->
    <div v-if="currentStep === 3">
      <n-data-table
        :columns="alarmColumns"
        :data="alarmData"
        :pagination="pagination"
      />
      <n-button type="default" class="mt-4" @click="currentStep--">上一步</n-button>
    </div>
  </n-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { NCard, NSteps, NStep, NSelect, NInput, NButton, NDataTable, useMessage } from 'naive-ui';

const message = useMessage();
const currentStep = ref(1);

// 摄像头选项
const selectedCamera = ref(null);
const cameraOptions = [
  { label: '摄像头1', value: 1 },
  { label: '摄像头2', value: 2 }
];

// 算法选项
const selectedAlgorithm = ref(null);
const algorithmOptions = [
  { label: '人脸检测', value: 1 },
  { label: '目标跟踪', value: 2 }
];

// 算法名称
const algorithmName = ref('');

// 报警详情
const alarmColumns = [
  { title: '时间', key: 'time' },
  { title: '报警类型', key: 'type' },
  { title: '详情', key: 'detail' }
];
const alarmData = reactive([
  { time: '2023-10-01 12:00', type: '人脸检测', detail: '检测到未知人员' }
]);

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true
});
</script>
